<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" 
       uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>  
<head>  
    <base href="localhost://localhost:2525/">  
    <title>My WebSocket</title>  
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
    <script src="http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"></script>  
</head>  
  
<body>  
	Welcome<br/> 
	<span id="userName">用户Id为：${ sessionScope.userName } </span> 
	<input id="text" type="text"/>  
	<button onclick="send()">Send</button>  
	<button onclick="closeWebSocket()">Close</button>
	  
	<div id="message">  
	
	</div>  
</body>  
  
<script type="text/javascript">  
    var websocket = null;  
  
    //判断当前浏览器是否支持WebSocket  
    if ('WebSocket' in window) { 
    	 var user = document.getElementById('userName').innerHTML
        websocket = new WebSocket("ws://localhost:2525/websocket?userId="+user);  
    }  
    else {  
        alert('Not support websocket')  
    }  
  
    //连接发生错误的回调方法  
    websocket.onerror = function () {  
        setMessageInnerHTML("error");  
    };  
  
    //连接成功建立的回调方法  
    websocket.onopen = function (event) {  
        setMessageInnerHTML("open");  
    }  
  
    //接收到消息的回调方法  
    websocket.onmessage = function (event) {  
        setMessageInnerHTML(event.data);  
    }  
  
    //连接关闭的回调方法  
    websocket.onclose = function () {  
        setMessageInnerHTML("close");  
    }  
  
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
    window.onbeforeunload = function () {  
        websocket.close();  
    }  
  
    //将消息显示在网页上  
    function setMessageInnerHTML(innerHTML) {  
        document.getElementById('message').innerHTML += innerHTML + '<br/>';  
    }  
  
    //关闭连接  
    function closeWebSocket() {  
        websocket.close();  
    }  
  
    //发送消息  
    function send() {  
        var message = document.getElementById('text').value;  
        websocket.send(message);  
    }  
</script>  
</html>  